<template>
    <div>
        <el-dialog v-model="props.visible" title="纸张编码列表" width="70%" @close="handleCancel">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-row>
                    <el-form-item label="纸张编码" prop="code">
                        <el-input
                            v-model="queryParams.code"
                            placeholder="请输入纸张编码"
                            clearable
                            style="width: 200px"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="纸张名称" prop="name">
                        <el-input
                            v-model="queryParams.name"
                            placeholder="请输入纸张名称"
                            clearable
                            style="width: 200px"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="定量" prop="weight">
                        <el-input
                            type="number"
                            v-model="queryParams.weight"
                            placeholder="请输入定量"
                            clearable
                            style="width: 200px"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="品牌" prop="brand">
                        <el-select
                            @keyup.enter="handleQuery"
                            v-model="queryParams.brand"
                            class="m-2"
                            filterable
                            placeholder="请选择纸张品牌"
                        >
                            <el-option
                                v-for="item in mes_paper_brand"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="规格型号" prop="specs">
                        <el-select
                            filterable
                            @keyup.enter="handleQuery"
                            v-model="queryParams.specs"
                            class="m-2"
                            placeholder="请选择"
                            style="width: 200px"
                        >
                            <el-option
                                v-for="item in mes_paper_specs"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">
                            搜索
                        </el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-table
                v-loading="loading"
                :data="paperList"
                stripe
                border
                style="cursor: pointer"
                @cell-click="handleCellClick"
            >
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column
                    label="纸张编码"
                    width="120"
                    align="center"
                    prop="code"
                ></el-table-column>
                <!-- <el-table-column
          label="自有编码"
          align="center"
          prop="originalCode"
        /> -->
                <el-table-column label="纸张名称" align="center" min-width="100" prop="name" />
                <!-- <el-table-column label="纸张全称" min-width="120" align="center" prop="fullName" /> -->
                <!-- <el-table-column label="定量" align="center" prop="weight" /> -->
                <!-- <el-table-column
                    label="规格型号"
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="specs"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </template>
                </el-table-column> -->
                <el-table-column
                    label="纸张品牌"
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="brand"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_brand" :value="scope.row.brand" />
                    </template>
                </el-table-column>
                <!-- <el-table-column label="计量单位" align="center" prop="unit">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="采购专员" align="center" prop="buyerName" /> -->
                <el-table-column label="客/厂料" align="center" prop="material">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_material" :value="scope.row.material" />
                    </template>
                </el-table-column>
                <el-table-column label="用纸类型" align="center" prop="useType">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_usetype" :value="scope.row.useType" />
                    </template>
                </el-table-column>

                <!-- <el-table-column label="实时单价" align="center" prop="realtimePrice" /> -->
                <!-- <el-table-column label="加权单价" align="center" prop="authorityPrice" /> -->
                <el-table-column label="幅宽(mm)" align="center" prop="longWide" />
                <!-- <el-table-column label="宽度(mm)" align="center" prop="wide" /> -->
                <el-table-column label="类型" align="center" prop="packageType">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_package" :value="scope.row.packageType" />
                    </template>
                </el-table-column>
                <el-table-column label="纸型" align="center" prop="paperType">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_type" :value="scope.row.paperType" />
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
const emit = defineEmits(['changeUpdate'])
import { listPaper } from '@/api/basicInfo/paperCoding.js'
const { proxy } = getCurrentInstance()
const {
    mes_paper_brand,
    mes_paper_unit,
    mes_paper_material,
    mes_paper_usetype,
    mes_paper_package,
    mes_paper_type,
    mes_paper_specs,
} = proxy.useDict(
    'mes_paper_brand',
    'mes_paper_unit',
    'mes_paper_material',
    'mes_paper_usetype',
    'mes_paper_package',
    'mes_paper_type',
    'mes_paper_specs'
)
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    useType: {
        type: String,
        default: '',
    },
    paperType: {
        type: String,
        default: '',
    },
    packageType: {
        type: String,
        default: '',
    },
})
watch(
    () => props.visible,
    val => {
        if (val) {
            handleQuery()
        }
    }
)
const paperList = ref([])
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    status: 0,
    code: undefined,
    name: undefined,
})
const total = ref(0)
// 选中当前行
const handleCellClick = row => {
    proxy.$modal
        .confirm('是否确认选择「' + row.name + '」')
        .then(function () {
            emit('changeUpdate', row)
        })
        .catch(() => {})
}

const handleCancel = () => {
    proxy.resetForm('queryRef')
    emit('cancel')
}
const getList = async () => {
    loading.value = true
    if (props.useType) {
        queryParams.value.useType = props.useType
    }
    if (props.paperType) {
        queryParams.value.paperType = props.paperType
    }
    if (props.packageType) {
        queryParams.value.packageType = props.packageType
    }
    const res = await listPaper(queryParams.value)
    loading.value = false
    paperList.value = res.rows
    total.value = res.total
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm('queryRef')
    handleQuery()
}
// getList()
</script>

<style lang="scss" scoped></style>
